<template>
  <div>
    <h3>测试</h3>
    <mypagetools :showLeft="true">
      <template #left>
        我是左侧的内容
      </template>
      <template #right>
        <el-button>我是自定义的按钮</el-button>
      </template>
    </mypagetools>
    <h3>使用 excel 导入</h3>
    <!-- <myupload></myupload> -->
    <h3>向对象服务 cos 中存储图片</h3>
    <input type="file" @click="change" ref="myfile" />
    <h3>使用自己封装的上传图片组件</h3>
    <imageUpload></imageUpload>
  </div>
</template>

<script>
// 导入上传文件的组件
import COS from "cos-js-sdk-v5";
export default {
  name: "social",
  data() {
    return {
      // 用来向资源服务器中上传资源
      cosObj: null
    };
  },
  components: {
    mypagetools: () => import("@/components/pagetools/index.vue")
    // myupload: () => import('@/components/excel/index.vue')
  },
  methods: {
    change() {
      // 得到上传框中的图片 对象
      // console.log(this.$refs.myfile.files[0]);
      const file = this.$refs.myfile.files[0];
      // 保存到存储桶
      this.cosObj.putObject(
        {
          Bucket: "rz74-1307667037" /* 必须 */,
          Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象;
            // console.log(JSON.stringify(progressData));
          }
        },
        (err, data) => {
          // data: 上传成功后的返回值;
          // err: 上传出错的错误信息;
          console.log(err || data);
        }
      );
    }
  },
  created() {
    // 初始 cos 对象
    this.cosObj = new COS({
      SecretId: "AKID61g4B1g4B1ZroY1ECtJTMyJNBixvd4E7", // 身份识别 id
      SecretKey: "f3A0Zrte8MJzOXP0KNAhz1nIWS8XeU3M" // 身份密钥
    });
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
